<template>
  <!-- container -->
  <div class="vue-drawer">
    <div :style="{'transform': 'translate3d('+translateX+'px,0,0)'}" class="main">
      <!-- main body -->
      <slot></slot>
      <!-- mask -->
      <div class="mask" :class="show ? 'active' : ''" @click="hideMask"></div>
    </div>
    <div ref="drawer" class="drawer" :style="styles" :class="[pos!='left' ? 'drawer-right' : 'drawer-left', show ? 'active' : '']">
      <!-- drawer -->
      <slot name="drawer"></slot>
    </div>
  </div>
</template>

<script scoped>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pos: {
      type: String,
      default: 'left'
    },
    tran: {
      type: String,
      default: 'overlay'
    },
    styles: Object
  },
  data() {
    return {
      drawerWidth: 0,
      translateX: 0
    }
  },
  watch: {
    show() {
      // listener
      if (!this.show) {
        this.$emit('on-hide')
      } else {
        this.$emit('on-show')
      }
      // transition
      if (this.tran === 'overlay') { return }
      if (!this.show) {
        this.translateX = 0
      } else {
        this.translateX = this.pos === 'left' ? this.drawerWidth : -this.drawerWidth
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawerWidth = this.$refs.drawer.clientWidth
    })
  },
  methods: {
    hideMask() {
      // this.show = false;
      this.$emit('change-show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.vue-drawer {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  & > .main {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform ease-in-out 0.38s, visibility 0.38s;
    & > .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      visibility: hidden;
      opacity: 0;
      transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 10;
    }
    & > .active {
      visibility: visible;
      opacity: 1;
    }
  }
  > .drawer {
    background-color: #fff;
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: transform ease-in-out 0.38s, visibility 0.38s;
    will-change: none;
  }
  & > .drawer-left {
    left: 0;
    transform: translateX(-102%);
  }
  & > .drawer-right {
    right: 0;
    transform: translateX(102%);
  }
  & > .active {
    pointer-events: inherit;
    visibility: visible;
    transform: translateX(0%);
  }
}
</style>